<template>
  <main>
    <div class="detail-root">
      <div class="detail">
        <img v-if="image" :src="image" class="detail-banner">
        <div class="content-container">
          <h1>{{ title }}</h1>
          <div class="content">
            {{ content }}
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
/* eslint-disable no-mixed-spaces-and-tabs */

import { Component, Vue, State } from 'nuxt-property-decorator'
import { rootModule } from '../store/index'

import { DetailInfo } from '../services/types'

// 头图
// 标题
// 正文

@Component({
  head () {
    return {
      title: '详情页'
    }
  }
} as any)
export default class Detail extends Vue {
  //   transition (to, from) {
  //     if (!from) {
  //       return 'slide-left'
  //     }
  //     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  //   }

    title = '';
    content = '';
    image = '';

    get id () {
      return this.$route.params.id
    }

    created () {
	  const storeData = (rootModule.detailInfos || []) as DetailInfo[]
      const currentData = storeData.filter(
        item => String(item.id) === this.id
      )[0]

      this.title = currentData.title
      this.content = currentData.content
      this.image = currentData.image
    }
}
</script>
<style lang="less" scoped>
.detail-root {
    position: relative;
    height: 100vh;

    .detail-banner {
        width: 100%;
    }

    .content {
        white-space: pre-wrap;
        text-align: left;
    }
}
</style>
